﻿
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>The Blog-Magazine Website Template | Home :: w3layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/search.css" rel="stylesheet" type="text/css" media="all" />
<!-- start nav -->
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
	<script>
	    $(function () {
	        var pull = $('#pull');
	        menu = $('nav ul');
	        menuHeight = menu.height();

	        $(pull).on('click', function (e) {
	            e.preventDefault();
	            menu.slideToggle();
	        });

	        $(window).resize(function () {
	            var w = $(window).width();
	            if (w > 320 && menu.is(':hidden')) {
	                menu.removeAttr('style');
	            }
	        });
	    });
	</script>
<!-- end nav -->


<link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider();
    });

  <!----End Calender -------->
 <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

  <script>


      function initialize() {
          var map = new google.maps.Map(document.getElementById('map-canvas'), {
              center: new google.maps.LatLng(-33.8665433, 151.1956316),
              zoom: 15
          });

          var request = {
              reference: 'CnRkAAAAGnBVNFDeQoOQHzgdOpOqJNV7K9-c5IQrWFUYD9TNhUmz5-aHhfqyKH0zmAcUlkqVCrpaKcV8ZjGQKzB6GXxtzUYcP-muHafGsmW-1CwjTPBCmK43AZpAwW0FRtQDQADj3H2bzwwHVIXlQAiccm7r4xIQmjt_Oqm2FejWpBxLWs3L_RoUbharABi5FMnKnzmRL2TGju6UA4k'
          };

          var infowindow = new google.maps.InfoWindow();
          var service = new google.maps.places.PlacesService(map);

          service.getDetails(request, function (place, status) {
              if (status == google.maps.places.PlacesServiceStatus.OK) {
                  var marker = new google.maps.Marker({
                      map: map,
                      position: place.geometry.location
                  });
                  google.maps.event.addListener(marker, 'click', function () {
                      infowindow.setContent(place.name + place.rating);
                      infowindow.open(map, this);
                  });
              }
          });
      }

      google.maps.event.addDomListener(window, 'load', initialize);



    </script>
 </head>

<body>
<div class="wrap">
	<div class="wrapper">
	
	<!-- start menu-->
	<div class="header">
		<div class="menu1">
		<!-- start navigation-->
		<nav class="clearfix">
			<ul class="clearfix">
				<li><a href="#">Home</a></li>
				<li><a href="#">How-to</a></li>
				<li><a href="#">Icons</a></li>
				<li><a href="#">Design</a></li>
				<li><a href="#">Web 2.0</a></li>
				<li><a href="#">Tools</a></li>	
			</ul>
			<a href="#" id="pull"><img src="images/nav-icon.png" /></a>
		</nav>
		<!-- end   navigation-->
		 </div>
		 <div class="header_right">
		 <div class="menu">
		 	<!-- start top-nav-->
			<div class="cssmenu">
					<ul>
					   <li><a href="#"><span>Home</span></a></li>
					   <li class="has-sub"><a href="#"><span>Store</span></a>
					   	<!-- IF you want sub-links remove this comment
					      <ul>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					      </ul>
					      --->
					   </li>
					   <li class="active"><a href="#"><span>Blog</span></a></li>
					   <li class="last"><a href="#"><span>Contact</span></a></li>
					   <div class="clear"></div>
					</ul>
				</div>
			<div class="clear"></div>
		</div>
    <div class="header_top_right">
		<!-- start search-->
		<div class="web_search">
		 <div class="search">
	        <form action="search.html">
	           <input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}" class="text"/>
	            <input type="submit" value=""/>
	        </form>
	        <div class="close"><img src="images/cross.png" /></div>
	    </div>
	    <div class="srch"><button></button></div>
		<script type="text/javascript">
		    $('.search').hide();
		    $('button').click(function () {
		        $('.search').show();
		        $('.text').focus();
		    }
	        );
		    $('.close').click(function () {
		        $('.search').hide();
		    });
	    </script>
	    </div>
		<!-- start social icons -->
		<div class="social-icons">
	   		  	<ul>
			      <li class="icon_1"><a href="#" target="_blank"> </a></li>
			      <li class="icon_2"><a href="#" target="_blank"> </a></li>
			      <li class="icon_3"><a href="#" target="_blank"> </a></li>
			      <div class="clear"></div>
		     </ul>
	   	 </div>
	   	 <!-- start login_box -->
			<div class="login_box">
	    		   <div id="loginContainer">
	                  <a id="loginButton" class=""><span></span></a>               
	                <div id="loginBox">                
	                    <form id="loginForm">
	                        <fieldset id="body">
	                            <fieldset>
	                                <label for="email">Email Address</label>
	                                <input type="text" name="email" id="email">
	                            </fieldset>
	                            <fieldset>
	                                <label for="password">Password</label>
	                                <input type="password" name="password" id="password">
	                            </fieldset>
	                            <input type="submit" id="login" value="Sign in">
	                            <label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
	                        </fieldset>
	                        <span><a href="#">Forgot your password?</a></span>
	                    </form>
	                </div>
	              </div>
	           </div>
	         <div class="clear"></div>
	         </div>
	    </div>	
	   <div class="clear"></div>
	</div>
	<!-- end header -->
	
	
		
	
	
	<div class="content_bottom" >
		<!-- start sidebar_left   ---->
		<div class="sidebar_left">
		<div class="grid_1_of_1">
        <ul class="nav3">
					<li><a class="facebook" href=""> <i class="facebook"></i><span>Facebook</span></a></li>
					<li class="active"><a class="twitter" href=""><i class="twitter"></i><span>Twitter</span></a></li>
					<li><a class="google" href=""><i class="google"></i><span>Google+</span></a></li>
					<li><a class="rss" href=""><i class="rss"></i><span>Rss Feeds</span></a></li>
					<li><a class="pinterest" href=""><i class="pinterest"></i><span>Pinterest</span></a></li>
					<div class="clear"></div>
				</ul>
                </div>
			<div class="grid_1_of_1">
				<div class="grid_1_of_1_text">
					<h3 class="left">Alex White <a href="">@alexWhite</a></h3>
					<div class="right">
						<i class="tick-arrow"> </i>
					</div>
					<div class="clear"></div>
				</div>
				<div class="para">
					<p class="">Singolo is a free PSD template of a flat, single page website created by <a href="">PsdChat #freebie #psd http://bit.ly/19XM8Lj</a> </p>
					<p class="top">2 hours ago</p>
				</div>
				<div class="para para1">
					<p class="">Saturday Career Workshops are back at ADC! See what high school students created this week: <a href="">http://bit.ly/Xx1EsL</a> </p>
					<p class="top">6 hours ago</p>
				</div>			
			</div>
			
			
		</div>
		<!-- end sidebar_left   ---->
		<!-- start sidebar_right   ---->
		<div class="sidebar_right">
		
			<div class="span_1_of_3">
			<div class="span_1_of_3_img" >
				<!--<img src="images/new.jpg" alt=""/> -->
				<div class="span_1_of_3_grid" align="left">
					<div class="grid_left1">
						<div class="article">
							<i class="article-icon"> </i>
						</div>
					</div>
					<div class="span_1_of_3_text">
						<h3><a href="#"> What is lorem ipsum ? </a></h3>
                       <div id="map-canvas" style ="width:700px; height:300px; margin-top:10px; "></div>
						<p> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.... <a href="#">Read more</a></p>
						<ul class="span_1_of_3_nav">
							<li><a href=""><i class="share_icon"></i><span>569 Shares</span></a></li>
							<li><a href=""><i  class="view_icon"></i><span>3,152 Views</span></a></li>
							<li><a href=""><i class="coment_icon"></i><span>21 Comments</span></a></li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				
			</div>
			</div>
			<div class="span_1_of_4">
				<div class="span_1_of_4_grid" align="left">
						<div class="grid_left1">
							<div class="quote">
								<i class="quote-icon"> </i>
							</div>
						</div>
				<div class="span_1_of_4_text">
					<h3>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 "</h3>
				</div>
				<div class="clear"></div>
			</div>
			</div>
			
		</div>	
		<!-- end sidebar_right   ---->
		</div>	
		<!-- end bottom_style   ---->
		<div class="clear"></div>
		</div>
<!-- end wrapper   ---->
	</div>
</div>

<div class="copy-right">
			<div class="wrap">
				<p>ɠ2013 Template by <a href="http://w3layouts.com" target="_blank">w3layouts</a> </p>
	 	    </div>
	 	 </div>
</body>
</html>
